import React, { Component } from 'react';
import { connect } from 'dva';

import { Form } from '@ant-design/compatible';

import {
  Col, Input, Row, Radio, Cascader,
} from 'antd';

import '@ant-design/compatible/assets/index.css';

const { TextArea } = Input;

interface BasicInfoProps {
  detailInfo: any;
  forms: object;
}

@connect(({ common }: any) => ({
  INITINFO: common.INITINFO,
}))

class BasicInfoElem extends Component<BasicInfoProps> {
  render() {
    const {
      forms: { getFieldDecorator },
      detailInfo,
      INITINFO: { addressList },
    }: any = this.props;

    return (
      <>
        <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
          <Col md={8} sm={24}>
            <Form.Item label="&nbsp;&nbsp;VIP编号" colon={false}>
              {getFieldDecorator('vipCode', ({
                initialValue: detailInfo.vipCode,
                rules: [
                  {
                    required: true,
                    message: '请输入VIP编号',
                  },
                  {
                    len: 8,
                    message: '长度必须为8位',
                  },
                  {
                    pattern: /^[0-9]+$/,
                    message: '必须为数字',
                  },
                ],
              }))(
                <Input allowClear placeholder="请输入" disabled={detailInfo.vipCode && true} />,
              )}
            </Form.Item>
          </Col>
          <Col md={8} sm={24}>
            <Form.Item label="商户名称" colon={false}>
              {getFieldDecorator('name', ({
                initialValue: detailInfo.name,
                rules: [{ required: true, message: '请输入商户名称' }],
              }))(
                <Input allowClear placeholder="请输入" />,
              )}
            </Form.Item>
          </Col>
          <Col md={8} sm={24}>
            <Form.Item label="　联系人" colon={false}>
              {getFieldDecorator('contact', ({
                initialValue: detailInfo.contact,
                rules: [{ required: true, message: '请输入联系人' }],
              }))(
                <Input allowClear placeholder="请输入" />,
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
          <Col md={8} sm={24}>
            <Form.Item label="　省市区" colon={false}>
              {getFieldDecorator('areaGrop', {
                initialValue: detailInfo.dareaCode && [
                  detailInfo.pareaCode,
                  detailInfo.careaCode,
                  detailInfo.dareaCode,
                ],
                rules: [{ required: true, message: '请选择省市区' }],
              })(
                <Cascader
                  options={addressList}
                  placeholder="请选择"
                />,
              )}
            </Form.Item>
          </Col>
          <Col md={8} sm={24}>
            <Form.Item label="手机号码" colon={false}>
              {getFieldDecorator('phone', ({
                initialValue: detailInfo.phone,
                rules: [{ required: true, message: '请输入手机号码' }],
              }))(
                <Input allowClear type="number" placeholder="请输入" />,
              )}
            </Form.Item>
          </Col>
          <Col md={8} sm={24}>
            <Form.Item label="启用状态" colon={false}>
              {getFieldDecorator('status', ({
                initialValue: detailInfo.status,
                rules: [{ required: true, message: '请选择启用状态' }],
              }))(
                <Radio.Group>
                  <Radio value={0}>禁用</Radio>
                  <Radio value={1}>激活</Radio>
                </Radio.Group>,
              )}
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
          <Col md={8} sm={24}>
            <Form.Item label="详细地址" colon={false}>
              {getFieldDecorator('address', ({
                initialValue: detailInfo.address,
                rules: [{ required: true, message: '请输入详细地址' }],
              }))(
                <TextArea placeholder="请输入" />,
              )}
            </Form.Item>
          </Col>
        </Row>
      </>
    );
  }
}

export default BasicInfoElem;
